<template>
	<i-drawer v-model="delShow" title="你确认要删除该提现方式吗" confirm_title="确认删除" @confirm="confirm"></i-drawer>
	<view class="add_bank">
		<view class="form">
			<i-formItem title="预留手机号" v-if='status === "bank"'>
				<input placeholder-class="placeholder-class" v-model="formData.phone" type="number" placeholder="请输入预留手机号">
			</i-formItem>
			<i-formItem title="预留手机号" v-if='status !== "bank"'>
				<input placeholder-class="placeholder-class" v-model="alData.phone" type="number" placeholder="请输入预留手机号">
			</i-formItem>
			<i-formItem title="支付宝账号" v-if='status !== "bank"'>
				<input placeholder-class="placeholder-class" v-model="alData.alipayPaymentAccount" type="text" placeholder="请输入支付宝账号">
			</i-formItem>
			<i-formItem title="银行名称" v-if='status === "bank"'>
				<input placeholder-class="placeholder-class" v-model="formData.bankName" type="text" placeholder="请输入银行名称" maxlength="20">
			</i-formItem>
			<i-formItem title="银行卡号" v-if='status === "bank"'>
				<input  placeholder-class="placeholder-class" v-model="formData.bankcardNum" type="number" placeholder="请输入银行卡号">
			</i-formItem>
			<view class="message">*请确保绑定账号与实名认证信息匹配，否则将导致提现失败</view>
			<i-buttons v-if="!userCardId" radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E"
				@click="add">立即添加
			</i-buttons>
			<i-buttons v-if="userCardId" radius="4" padding="18rpx 0" size="32" color="#fff" bgColor="#FB652E"
				@click="edit">保存
			</i-buttons>
			<view style="height: 32rpx;"></view>
			<i-buttons v-if="userCardId" radius="4" padding="18rpx 0" size="32" @click="handleDel">删除</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		addUserCard,
		deleteBankCard,
		getUserCardDetail,
		modifyUserCard
	} from '../../api/user'
	import {
		showTost,
		checkForm
	} from '../../utils/common'
	import {
		phoneReg,
		bankReg
	} from '../../utils/regs'

	interface AddUserCard {
		"bankName" ?: string,
		"bankcardNum" ?: string,
		"cardType" : "10001001" | '10001002' | '10001003' | '10001004',
		"phone" : string,
		"userCardId" ?: string
		"alipayPaymentAccount" ?: string,
	}
	enum payStatus {
		al = '支付宝',
		bank = '银行卡'
	}

	const delShow = ref(false)
	const userCardId = ref<string>('')
	const status = ref<string>('')

	const formData = reactive<AddUserCard>({
		"bankName": "",
		"bankcardNum": "",
		"cardType": "10001001",
		"phone": "",
	})

	const alData = reactive<AddUserCard>({
		alipayPaymentAccount: '',
		"cardType": "10001003",
		"phone": "",
	})

	onLoad((option) => {
		status.value = option.status
		if (option?.userCardId) {
			userCardId.value = option.userCardId
			getBank(option.userCardId)
		}

	})
	onReady(() => {
		uni.setNavigationBarTitle({
			title: userCardId.value ? `编辑${payStatus[status.value]}` : `添加${payStatus[status.value]}`
		})
	})
	const confirm = async () => {
		await deleteBankCard({
			userCardId: userCardId.value
		})
		showTost('删除银行卡成功', () => {
			uni.navigateBack()
		})
	}
	const add = async () => {

		const data = status.value === 'bank' ? checkForm(formData, [], { phone: { reg: phoneReg, message: '请输入正确手机号' }, bankcardNum: { reg: bankReg, message: '请输入正确银行卡号' } }) : checkForm(alData, [], { phone: { reg: phoneReg, message: '请输入正确手机号' } })
		if (data) {
			return
		}
		if (status.value === 'bank') {
			if ((formData.phone + '').length !== 11) {
				showTost('请输入正确手机号')
				return
			}
		} else {
			if ((alData.phone + '').length !== 11) {
				showTost('请输入正确手机号')
				return
			}
		}

		const params = status.value === 'bank' ? formData : alData

		await addUserCard(params)
		showTost(`添加${payStatus[status.value]}成功`, () => {
			uni.navigateBack()
		})

	}
	const edit = async () => {
		const data = status.value === 'bank' ? checkForm(formData, [], { phone: { reg: phoneReg, message: '请输入正确手机号' }, bankcardNum: { reg: bankReg, message: '请输入正确银行卡号' } }) : checkForm(alData, [], { phone: { reg: phoneReg, message: '请输入正确手机号' } })
		if (data) {
			return
		}
		if (status.value === 'bank') {
			if ((formData.phone + '').length !== 11) {
				showTost('请输入正确手机号')
				return
			}
		} else {
			if ((alData.phone + '').length !== 11) {
				showTost('请输入正确手机号')
				return
			}
		}

		const params = status.value === 'bank' ? formData : alData
		await modifyUserCard({
			...params,
			userCardId: userCardId.value
		})
		showTost(`保存${payStatus[status.value]}成功`, () => {
			uni.navigateBack()
		})
	}
	const handleDel = () => {
		delShow.value = true
	}
	const getBank = async (userCardId : string) => {
		const {
			data
		} = await getUserCardDetail({
			userCardId
		})
		if (status.value === 'bank') {
			formData.bankName = data.bankName
			formData.bankcardNum = data.bankcardNum
			formData.phone = data.phone
		} else {
			alData.alipayPaymentAccount = data.alipayPaymentAccount
			alData.phone = data.phone
		}

	}
</script>

<style lang="scss" scoped>
	.add_bank {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.form {
			padding: 0 24rpx;
		}

		input {
			width: 70%;
		}

		.message {
			@include dfont(24rpx);
			color: #A0A0AD;
			margin: 20rpx 0 48rpx 0;
		}
	}
</style>